<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>手机端登录页面</title>
  <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
  <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
  <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
  <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
  <h1 >手机端登录页面</h1>
  <div v-if="myinfo">欢迎{{myinfo.uname}}</div>
  <form v-else>
    账号:<input v-model="user.uname"><br>
    密码:<input v-model="user.pwd" type="password"><br>
    <button @click.prevent="login">登录</button>
  </form>
</div>
<script>
  var v = new Vue({
    el:"#app",
    data:{
      user:{
        uname:"", pwd:""
      },
      myinfo:null
    },
    methods:{
      login(){
        axios.post("../blog-user/userinfo/login",this.user).then(res=>{
          if(res.data.code == 1){
            this.myinfo = res.data.data;
            localStorage.setItem("cinema-username", this.user.uname);
            localStorage.setItem("cinema-password", this.user.pwd);
          } else {
            this.$message(res.data.msg);
          }
        })
      }
    },
    created(){
      if (localStorage.getItem("cinema-username")) {
        this.user.uname = localStorage.getItem("cinema-username");
        this.user.pwd = localStorage.getItem("cinema-password");
        this.login();
      }
    }
  })
</script>
</body>
<style>
  *{
    font-size: 1.7rem;
  }
  #app{
    width: 70vw;
    margin: 10vh auto;
  }
</style>
</html>